<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import SelectTags from 'tnuiv3p-tn-select-tags/index.vue'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import { useScrollTransparentNavbar } from '@/hooks'
import { USER_INFO, SYSTEM_CONFIG, FILE_URL } from '@/api/config'
import user from '@/api/user.js'

// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  loading: false,
  page: 1,
  currentPage: 1,
  total: 0,
  currentSelectTags: [],
  tagItems: [],
})

const goToNextPage = () => {
  state.currentPage++
  if (state.currentPage < state.page) {
    getUserLabels(state.currentPage)
  } else {
    state.currentPage = 1
    getUserLabels(1)
  }
}
const confirmLebals = () => {
  if (state.currentSelectTags.length == 0) {
    uni.showToast({
      title: '请选择标签！',
      icon: 'none',
    })
    return
  }
  if (state.currentSelectTags.length > 5) {
    uni.showToast({
      title: '最多只能选择5个标签',
      icon: 'none',
    })
    return
  }
  saveUserInfo()
}

const saveUserInfo = () => {
  state.loading = true
  user
    .updateUserInfo({
      label_ids: state.currentSelectTags.join(','),
    })
    .then((res) => {
      if (res.code == 1) {
        state.loading = false
        uni.setStorageSync(USER_INFO, res.data.userInfo)
        uni.showToast({
          title: '保存成功',
        })
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index',
          })
        }, 2000)
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

const getUserLabels = (pageNo: number) => {
  user
    .userLabels({
      page: pageNo,
      page_size: 20,
    })
    .then((res) => {
      if (res.code == 1) {
        state.tagItems = res.data.lists
        state.total = res.data.count
        state.page = Math.ceil(state.total / 20)
        console.log(state.tagItems, 'tagItems')
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}
onMounted(() => {
  getUserLabels(1)
})
onLoad((options) => {
  if (options.labelIds != '') {
    state.currentSelectTags = options.labelIds.split(',').map(Number)
  }
})
onReady(() => {
  initTransparentScroll()
})
onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      选择标签
    </TnNavbar>
    <view class="container">
      <view class="tn-mt-sm" :style="{ paddingTop: `${navbarHeight + 10}px` }">
        <view class="tn-p-sm tn-text-center">
          <view class="tn-text-xl"
            >选择标签<TnIcon name="tag" color="#01beff"
          /></view>
          <view class="tn-text-sm tn-mt-sm" style="color: #9c9c9c"
            >最多可选择5个标签</view
          >
          <view class="tn-mt-lg tn-mb-xs" style="color: #9c9c9c">
            <!-- <text class="tn-gray_text">当前选中的标签的值:</text>
            <text>{{ state.currentSelectTags.join(',') }}</text> -->
          </view>
        </view>
        <view style="border-bottom: 20rpx solid var(--tn-color-gray-light)" />
        <view class="tn-p">
          <view class="tn-flex tn-flex-row items-center tn-mb">
            <view class="tn-text-bold tn-text-lg tn-flex-1 justify-start"
              >推荐标签</view
            >
            <view
              class="tn-flex justify-end items-center"
              style="color: #aaaaaa"
              @click="goToNextPage"
            >
              <TnIcon name="refresh" size="36rpx" />换一批
            </view>
          </view>
          <SelectTags
            v-model="state.currentSelectTags"
            :items="state.tagItems"
            inactive-bg-color="tn-grey-light"
          />
        </view>
      </view>
      <!-- <view class="tn-tabbar-height" /> -->
    </view>
    <view style="border-bottom: 3rpx solid var(--tn-color-gray-light)" />
    <view class="tn-flex-center tn-mt">
      <TnButton
        size="xl"
        width="60%"
        shape="round"
        :loading="state.loading"
        @click="confirmLebals"
      >
        确认
      </TnButton>
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use './styles/labels.scss';
</style>
